<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="d3.v3.min.js"></script>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="underscore-min.js"></script>
    <script type="text/javascript" src="jquery.tipsy.js"></script>
    <script type="text/javascript" src="jquery.ba-bbq.min.js"></script>


    <link href="tipsy.css" rel="stylesheet" type="text/css" />
    <link href="font-awesome.min.css" rel="stylesheet" type="text/css" />
    <title>AutoNetkit</title>

    <link rel="stylesheet" type="text/css" href="default.css" title = "default">

    <link rel="alternate stylesheet" type="text/css" title="maximised" href = "maximised.css">

    <link rel="stylesheet" type="text/css" media="print" href="print.css">
    

  </head>
  <body>

      <div class="navbar">
          <b>AutoNetkit</b>
          <span id="websocket_icon"></span>
          | <i class="icon-reorder "></i> Overlay:
        <select id = "overlay_select"></select>
        <select id = "revision_select"></select>
        <!--- <button onclick="history_start();"><<</button>
        <button onclick="history_back();"><</button>
        <button onclick="history_forward();">></button>
        <button onclick="history_end();">>></button>
        !-->
        <!---<button onclick="javascript:setActiveStyleSheet('maximised');">Max</button>-->
        <button onclick="zoom_fit();">
            <i class="icon-move "></i>
        </button>

        |
        <label for="display_interfaces">
            <i class="icon-plus-sign-alt"></i>
        </label>
        <input type="checkbox" id="display_interfaces" value="display_interfaces" />

        |<select id = "node_label_select"></select>
        <select id = "edge_group_select"></select>
        <select id = "interface_label_select"></select>

        |        <button onclick="toggle_visibility('node_filter');">
            <i class="icon-filter "></i> Node Filter
        </button>
    </div>

    <div class="node_filter" id="node_filter">
    </div>


    <div class="infobar"></div>
    <div class="visualisation""></div>
    <div class="size_box"><a href="javascript:setActiveStyleSheet('default');">Resize</a></div>

    <div>
      <script type="text/javascript">

var current_translate = "0,0";

 //$( "#slider-vertical" ).slider({
      //orientation: "vertical",
      //range: "min",
      //min: -9,
      //max: 9,
      //value: 0,
      //slide: function( event, ui ) {
      //scale = ui.value;
      //console.log(scale);
      //console.log(scale, scale <0);
      //if (scale >= 0)  scale = scale + 1;
      //if (scale < 0)  scale = 1  + 1*(scale/10);
      //console.log(scale);
      //chart.attr("transform", "translate(" + current_translate + ") scale(" + scale + "," + scale + ")");
      //}
    //});

        function setActiveStyleSheet(title) {
          //From http://www.alistapart.com/articles/alternate/
          var i, a, main;
          for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
            if(a.getAttribute("rel").indexOf("style") != -1
                && a.getAttribute("title")) {
              a.disabled = true;
              if(a.getAttribute("title") == title) a.disabled = false;
            }
          }
        }

   
//TODO: use icons that are updated for the zoom and Interfaces selectors

var overlay_id = "phy";

var overlay_dropdown = d3.select("#overlay_select")
.attr("title", "Overlay graph")
.on("change", function() {
    overlay_id = this.value;
    if (overlay_id == "ip_allocations") {
        ws.send("ip_allocations");
    }
    else {
        ws.send("overlay_id=" + overlay_id);
    }
update_title();
clear_graph_history();
});

var revision_dropdown = d3.select("#revision_select")
.attr("title", "Revision")
.attr("style.display", "none")
.on("change", function() {
    revision_id = this.value;
    load_revision();
    redraw(); //TODO: remove this once using websocket callback for next line
    //ws.send("overlay_id=" + overlay_id); //TODO: call server for history
    });

$('#revision_select').hide();


var node_label_select = d3.select("#node_label_select")
.attr("title", "Node Label")
.on("change", function() {
    node_label_id = this.value;
    redraw();
    })



var edge_group_select = d3.select("#edge_group_select")
.attr("title", "Edge Label")
.on("change", function() {
    edge_group_id = this.value;
    redraw();
    })

var interface_label_select = d3.select("#interface_label_select")
.attr("title", "Interface Label")
.on("change", function() {
    interface_label_id = this.value;
    console.log(interface_label_id);
    redraw();
    })


var display_interfaces = false

d3.select("#display_interfaces")
.on("change", function() {
        display_interfaces = d3.select(this).property("checked");
        console.log(display_interfaces);
        redraw();
        })

var status_label = d3.select("navbar").append("text")
.attr("class", "status label")
.attr("y", 15)
.attr("x", 0)
.attr("font-size", "14") 
.text("")
;

var zoom = d3.behavior.zoom()
    .scale(1)
    .scaleExtent([0.4, 8])
    .on("zoom", redraw);

//Arbitrary scalings, nodes are adjusted to these
var chart_width = 1200;
var chart_height = 1000;

d3.select(".visualisation");

p = 1;

var chart = d3.select(".visualisation")
.append("svg:svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("pointer-events", "all")
.attr("viewBox", "0 0 " + chart_width * 0.85 + " " + chart_height * 0.85)
.append('svg:g')
.attr("class", "zoom_box")
//.call(d3.behavior.zoom().on("zoom", redraw))
//.attr("transform", "translate(" + p + "," + p + ")")
.call(zoom)
.append('svg:g');


//TODO: create an svg:g to contain nodes, another the edges, to avoid overlap

chart.append('svg:rect')
.attr("class", "chart_rect")
.attr('width', chart_width)
.attr('height', chart_height);



function redraw() {
    //current_translate = d3.event.translate; // store to use when using slider
    chart.attr("transform",
                   "translate(" + d3.event.translate + ")"
                   + " scale(" + d3.event.scale + ")");
}

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>
<script type="text/javascript" src="ank_render.js"></script>

    </div>
  </body>
</html>
